<template>
  <div class="change-control-teams-reference" v-show="functionList.edit_change_control_teams_reference">
    <el-container>
      <el-header class="header-class" height="22">
        <div class="header-text">Change Control Team's Reference</div>
      </el-header>
      <el-main class="container-main">
        <el-form label-position="left" :model="changeControlTeamsReferenceData" :rules="rules" ref="validatorForm" :size="form_size" :label-width="label_width" :show-message="false">
          <el-form-item label="ChgCtlRef :">
            <permission-slot :readOnly="!this.functionList.edit_change_control_teams_reference" :labelName="changeControlTeamsReferenceData.chgCtlRef">
              <el-input style="width: 610px;" type="textarea" v-model="changeControlTeamsReferenceData.chgCtlRef"></el-input>
            </permission-slot>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import PermissionSlot from '@/base-components/permission/PermissionSlot'

export default {
  components: {PermissionSlot},
  name: 'change-control-teams-reference',
  props: {
    changeControlTeamsReferenceData: {
      type: Object
    },
    functionList: {
      type: Object
    }
  },

  data() {
    return {
      form_size: 'mini',
      label_width: '150px',

      rules: {
      }
    }
  }
}
</script>

<style scoped lang="scss">
  @import './../../../common/css/base.scss';

  .container-main {
    border: 1px solid $base-header-color;
  }

  .header-class {
    @include baseHeader(30px)
  }

  .header-text {
    color: #fff;
    margin-top: 5px;
    font-weight: bold;
  }
</style>
